<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/newAccount.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/JavaScript" src="./resources/js/bootstrap.min.js"></script>

    </h:head>
    
    <f:view locale="#{bundle.locale}">
    <body>
        <f:loadBundle basename="resources.lang" var="msg" />
        <ui:composition template="./Base.xhtml">

            <ui:define name="content">
                <div class="MainContainer">           
                    <h1><h:outputText value="#{msg.LienNewAccount}"></h:outputText></h1>
                    <h:form id="NewAccount" class="form-horizontal">
                        <div class="control-group">
                            <h:outputText class="control-label" value="#{msg.labelName}"></h:outputText>
                            <div class="span2">
                                <h:inputText id="nom" required="true" requiredMessage="#{msg.NomError}" value="#{CreateAccount.nom}">
                                  <f:validateLength maximum="20"/>
                              </h:inputText>
                              <h:message for="nom" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                            </div>
                        </div>
                        <div class="control-group">
                            <h:outputText class="control-label" value="#{msg.labelPrenom}"></h:outputText>
                            <div class="span2">
                                <h:inputText id="prenom" required="true" requiredMessage="#{msg.PrenomError}" value="#{CreateAccount.prenom}">
                                  <f:validateLength maximum="20"/>
                              </h:inputText>
                              <h:message for="prenom" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                            </div>
                        </div>
                        <div class="control-group">
                            <h:outputText class="control-label" value="#{msg.labelCivil}"></h:outputText>
                            <div class="span2">
                                <h:selectOneRadio id="civilite" value="#{CreateAccount.civilite}" layout="lineDirection">
                                    <f:selectItem id="item1" itemValue="M" itemLabel="M" />
                                    <f:selectItem id="item2" itemValue="Mlle" itemLabel="Mlle"/>
                                    <f:selectItem id="item3" itemValue="Mme" itemLabel="Mme"/>
                                </h:selectOneRadio>     
                                <h:message for="civilite" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                            </div>
                        </div>
                        <div class="control-group">
                            <h:outputText class="control-label" value="#{msg.labelmail}"></h:outputText>
                            <div class="span2">
                                <h:inputText id="mail" required="true" requiredMessage="#{msg.MailError}" value="#{CreateAccount.email}">
                                    <f:validator validatorId="emailAddressValidator" />
                                    <f:validateLength maximum="40"/>
                                </h:inputText>
                                <h:message for="mail" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                            </div>
                        </div>
                        <div class="control-group">
                            <h:outputText class="control-label" value="#{msg.labelAddr}"></h:outputText>
                            <div class="span2">
                                <h:inputTextarea rows="3" id="adresse" required="true" requiredMessage="#{msg.AdrError}" value="#{CreateAccount.adresse}">
                                    <f:validateLength maximum="100"/>
                                </h:inputTextarea>
                                <h:message for="adresse" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                            </div>
                        </div>
                        <div class="control-group">
                            <h:outputText class="control-label" value="#{msg.labelCP}"></h:outputText>
                            <div class="span1">
                                <h:inputText class="input-small" id="cp" required="true" requiredMessage="#{msg.CPError}" value="#{CreateAccount.cp}">
                                    <f:convertNumber integerOnly="true" />
                                    <f:validateLength minimum="4"/>
                                </h:inputText>
                                <h:message for="cp" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                            </div>
                        </div>
                        <div class="control-group">
                            <h:outputText class="control-label" value="#{msg.labelBox}"></h:outputText>
                            <div class="span1">
                                <h:inputText class="input-small" id="boiteLocalite" value="#{CreateAccount.box}">
                                    <!--<f:convertNumber integerOnly="true" />-->
                                    <f:validateLength maximum="10"/>
                                </h:inputText>
                                <h:message for="boiteLocalite" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                            </div>
                        </div>
                        <div class="control-group">
                            <h:outputText class="control-label" value="#{msg.labelCity}"></h:outputText>
                            <div class="span2">
                                <h:inputText id="localite" required="true" requiredMessage="#{msg.LocError}" value="#{CreateAccount.ville}">
                                  <f:validateLength maximum="50"/>
                              </h:inputText>
                              <h:message for="localite" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                            </div>
                        </div>
                        <div class="control-group">
                            <h:outputText class="control-label" id="phone" value="#{msg.labelTel}"></h:outputText>
                            <div class="span2">
                                <h:inputText id="tel" required="true" requiredMessage="#{msg.TelError}" value="#{CreateAccount.tel}">
                                    <!--<f:convertNumber integerOnly="true" />-->
                                    <f:validateLength minimum="9"/>
                                </h:inputText>
                              <h:message for="tel" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>
                            </div>
                        </div>
                        <div class="control-group">
                            <h:outputText class="control-label" id="new" value="#{msg.labelPass1}"></h:outputText>
                            <div class="span2">
                                <h:inputSecret id="pwd" required="true" requiredMessage="#{msg.PwdError}" value="#{CreateAccount.pwd_1}">
                                    <f:validateLength minimum="8"/>
                                    <f:validator validatorId="duplicateFieldValidator" />
                                    <f:attribute name="endComponentId" value="NewAccount:pwdConfirm" />
                                </h:inputSecret>
                              <h:messages for="pwd" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:messages>                          
                            </div>
                        </div>    
                        <div class="control-group">
                            <h:outputText class="control-label" id="confirm" value="#{msg.labelPass2}"></h:outputText>
                            <div class="span2">
                                <h:inputSecret id="pwdConfirm" required="true" requiredMessage="#{msg.PwdConfirmError}" value="#{CreateAccount.pwd_2}">
                                    <f:validateLength minimum="8"/>
                                </h:inputSecret>
                              <h:message for="pwdConfirm" class="help-inline" errorStyle="color:red; display:block; width: 500px; margin-left: -160px"></h:message>            
                            </div>
                        </div>    

                        <div class="modal-footer">
                            <h:button class="btn" outcome="index.xhtml" value="Apppstore"></h:button>
                            <h:commandButton action="#{CreateAccount.NewClient}" class="btn btn-primary" value="#{msg.BtnCreation}"></h:commandButton>
                        </div>
                    </h:form>
                </div>
                <br/><br/>    
            </ui:define>

        </ui:composition>

    </body>
    </f:view>
</html>
